<template>
	<div>
		<h1>数据</h1>
		<div class="foot_main">
			<!-- 大 -->
			<div class="foo_pa">
				<p class="foot_1">
					<i class="iconfont">&#xe61d;</i>
					<label class="">基本数据</label>
				</p>
				<p class="foot_2">
					<label class="">时间类型</label>
					<ul>
						<li>累计</li>
						<li>日</li>
						<li>周</li>
						<li>月</li>
					</ul>
				</p>
				<p class="foot_3">
					<label class="">更新时间</label>
					<label class="left_3">今日 17:03</label>
				</p>
				<p class="foot_4">
					<label class="">累计贷款金额</label>
				</p>
				<p class="foot_5">
					<label class="foot_f">
						<i class="iconfont" style="display: inline-block;">&#xe60c;</i>
						<h2 style="float: right;">83623332333</h2>
						<span>.00</span>
					</label>
				</p>
				<!--  -->
				<ul class="foot_6">
					<li>
						<label style="font-size: 0.25rem;">用户情况</label>
						<h3 style="margin: 0.1rem 0rem;">8666人</h3>
						<p style="font-size: 0.02rem;color: gray;display: flex;align-items: center;">
							较昨日
							<span style="color: red;">
								<i class="iconfont">&#xe6a5;</i>
								85%
							</span>
						</p>
					</li>
					<li>
						<label style="font-size: 0.25rem;">完成评测</label>
						<h3 style="margin: 0.1rem 0rem;">126人</h3>
						<p style="font-size: 0.02rem;color: gray;display: flex;align-items: center;">
							较昨日
							<span style="color: red;">
								<i class="iconfont">&#xe6a5;</i>
								0.9%
							</span>
						</p>
					</li>
					<li>
						<label style="font-size: 0.25rem;">贷款中</label>
						<h3 style="margin: 0.1rem 0rem;">1936人</h3>
						<p style="font-size: 0.02rem;color: gray;display: flex;align-items: center;">
							较昨日
							<span style="color: red;">
								<i class="iconfont">&#xe6a5;</i>
								8.3%
							</span>
						</p>
					</li>
					<li>
						<label style="font-size: 0.25rem;">贷款完成</label>
						<h3 style="margin: 0.1rem 0rem;">8666人</h3>
						<p style="font-size: 0.02rem;color: gray;display: flex;align-items: center;">
							较昨日
							<span style="color: green;">
								<i class="iconfont">&#xe6c5;</i>
								20%
							</span>
						</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="foot_main2">
			<div class="foo_pa2">
				<p class="foot_1">
					<i class="iconfont" style="color: orange !important;">&#xe87b;</i>
					<label class="">历史趋势</label>
				</p>
				<p class="foot_3">
					<label class="">日期范围</label>
					<label class="left_3">访问人数</label>
					<i class="iconfont" style="margin-left: 0.2rem;">&#xe613;</i>
				</p>
				<p class="foot_2">
					<label class="">日期范围</label>
					<ul>
						<li>近7天</li>
						<li>近30天</li>
						<li>自定义</li>
					</ul>
				</p>
				<div class="main" ref='chart'></div>
			</div>
		</div>
	</div>
</template>

<script>
	var echarts = require('echarts');
	export default {
		name: "Header",
		data() {
			return {
				data: {
					title: {
						text: ""
					},
					tooltip: {},
					xAxis: {
						type: 'category',
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [450, 500, 250, 330, 600, 450, 750],
						type: 'line',
						smooth: true
					}]
				}
			}
		},
		mounted() {
			echarts.init(this.$refs.chart).setOption(this.data);
		}
	}
</script>

<style scoped="scoped">
	.app {
		width: 100%;
	}

	h1 {
		width: 94%;
		margin: 10px auto;
	}

	.foot_main {
		width: 94%;
		margin: 10px auto;
		height: 7.8rem;
		border-radius: 3%;
		background-color: white;
	}

	.foot_main2 {
		width: 94%;
		margin: 10px auto;
		height: 6.8rem;
		border-radius: 3%;
		background-color: white;
	}

	.foot_main .foo_pa {
		padding: 10px;
	}

	.foot_main2 .foo_pa2 {
		padding: 10px;
	}

	.foot_1 {
		display: flex;
		align-items: center;
		margin-left: 0.25rem;
	}

	.foot_2 {
		display: flex;
		align-items: center;
		margin: 0.25rem 0px 0.25rem 0.25rem;
	}

	.foot_3 {
		display: flex;
		align-items: center;
		margin: 0.25rem 0px 0.25rem 0.25rem;
	}

	.foot_4 {
		display: flex;
		align-items: center;
		margin: 0.25rem 0px 0.25rem 0.25rem;
	}

	.foot_5 {
		margin: 0.25rem 0px 0.25rem 0.25rem;
		position: relative;
	}

	.foot_6 {
		width: 6.4rem;
		height: 2.8rem;
		margin: 0.5rem 0px 0.25rem 0.25rem;
	}

	.foot_7 {
		display: flex;
		align-items: center;
		margin: 0.25rem 0px 0.25rem 0.25rem;
	}

	.foot_6>li {
		width: 50%;
		height: 1.4rem;
		float: left;
		margin: 0.2rem 0rem;
	}

	.foot_5::after {
		content: '';
		position: absolute;
		width: 100%;
		margin: 0.4rem 0px;
		border: 0.001rem solid #F1EFEE;
	}

	.foot_5 .foot_f {
		display: flex;
		align-items: center;
		height: 0.7rem;
	}

	.foot_3 .left_3 {
		margin-left: 0.4rem;
		color: gray;
	}

	.foot_2 ul li:nth-child(1) {
		color: #0000EE !important;
		margin-left: 0.4rem !important;
	}

	.foot_2 ul li {
		display: inline-block;
		margin: 0px 0.1rem;
		text-align: center;
		padding: 0rem 0.2rem;
		height: 0.5rem;
		line-height: 0.5rem;
		border-radius: 5%;
		background-color: #F0F0F0;
		color: gray;
	}


	.foot_1>i {
		font-size: 0.45rem;
		color: #0000EE;
		display: inline-block;
		margin-right: 0.15rem;
	}

	.main {
		width: 94%;
		height: 6rem;
		bottom: 1rem;
		margin: 0rem 0px 0.25rem 0.25rem;
	}
</style>
